<template>
  <div class="box">
    <ul>
      <router-link to="/films/nowplaying" custom v-slot="{navigate,isActive}">
        <li @click="navigate">
          <span :class="isActive?'router-link-active':''">正在热映</span>
        </li>
      </router-link>
      <router-link to="/films/comingsoon" custom v-slot="{navigate,isActive}">
        <li @click="navigate">
          <span :class="isActive?'router-link-active':''">即将上映</span>
        </li>
      </router-link>
<!--      <li :class="switchClass?'':'active'" @click="handleHot">-->
<!--        <span>正在热映</span>-->
<!--      </li>-->
<!--      <li :class="switchClass?'active':''" @click="handleComing">-->
<!--        <span>即将上映</span>-->
<!--      </li>-->
<!--      <div>-->
<!--        <span></span>-->
<!--      </div>-->
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 49px;
  background-color: #fff;
  border-bottom: 1px solid #ececec;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 99;

  ul {
    width: 100%;
    height: 16px;
    color: #434546;
    display: flex;

    li {
      flex: 1;
      width: 100%;
      height: 16px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        font-size: 14px;
        font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;
        line-height: 49px;
        text-align: center;
        border-radius: 1px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
    }
  }
}

.router-link-active {
  color: #ff7737;
  border-bottom: 2px solid #ff7737;
}

</style>
